<template>
  <div class="statistics-wrapper">
    <div class="search">
      <el-form class="search-form" inline>
        <el-form-item label="时间段">
          <el-date-picker
            v-model="searchParams.time"
            type="daterange"
            value-format="YYYY-MM-DD"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="handleSearch()"
        ><svg-icon name="search" size="14px" />搜索</el-button
      >
      <el-button @click="handleReset()"
        ><svg-icon name="reset" size="17px" />重置</el-button
      >
      <el-button @click="handleExport"
        ><svg-icon name="export" size="14px" />导出数据</el-button
      >
    </div>
    <div class="content">
      <div class="content-top">
        <div class="title">巡检任务统计（项）</div>
        <div class="content-top-chart">
          <DrawEcharts v-if="taskOptions" :options="taskOptions" />
        </div>
      </div>
      <div class="content-bottom">
        <div class="title">巡检报表</div>
        <div class="content-bottom-table">
          <el-table class="custom-table" :data="tableData">
            <el-table-column type="index" label="序号" width="60px" />
            <el-table-column
              prop="time"
              label="任务日期"
              header-align="center"
            />
            <el-table-column label="任务统计" header-align="center">
              <el-table-column
                prop="jhcs"
                label="计划次数"
                header-align="center"
              />
              <el-table-column
                prop="ywcs"
                label="已完成数"
                header-align="center"
              />
              <el-table-column
                prop="wwcs"
                label="未完成数"
                header-align="center"
              />
              <el-table-column
                prop="ycss"
                label="已超时数"
                header-align="center"
              />
            </el-table-column>
            <el-table-column label="巡检点巡检情况" header-align="center">
              <el-table-column
                prop="jhs"
                label="计划数"
                header-align="center"
              />
              <el-table-column prop="zc" label="正常" header-align="center">
                <template #default="scope">
                  {{ scope.row.zc }}
                </template>
              </el-table-column>
              <el-table-column prop="yc" label="异常" header-align="center">
                <template #default="scope">
                  {{ scope.row.yc }}
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
        <div class="content-bottom-page">
          <el-pagination
            class="custom-pagination"
            :current-page="paginationParams.pageIndex"
            :page-size="paginationParams.pageSize"
            background
            :page-sizes="[10, 20, 30, 50]"
            layout="total, prev, pager, next, sizes, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="initTableList"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import DrawEcharts from '@/components/draw-echarts.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, onMounted } from 'vue'
const searchParams = ref({
  time: [],
})
const tableData = ref([])
const paginationParams = ref({
  pageIndex: 1,
  pageSize: 5,
})
const total = ref(100)
// 初始化列表
const initTableList = (pageIndex) => {
  if (pageIndex) {
    paginationParams.value.pageIndex = pageIndex
  }
  const params = { ...searchParams.value, ...paginationParams.value }
}
// 页数改变
const handleSizeChange = (val) => {
  paginationParams.value.pageSize = val
  initTableList(1)
}

const taskOptions = ref(null)
const initOptions = () => {
  const data = [
    {
      time: '12-01',
      day: 5,
      important: 8,
      device: 15,
    },
    {
      time: '12-02',
      day: 9,
      important: 12,
      device: 34,
    },
    {
      time: '12-03',
      day: 25,
      important: 18,
      device: 35,
    },
    {
      time: '12-04',
      day: 20,
      important: 25,
      device: 40,
    },
    {
      time: '12-05',
      day: 17,
      important: 18,
      device: 37,
    },
    {
      time: '12-06',
      day: 15,
      important: 12,
      device: 30,
    },
    {
      time: '12-07',
      day: 8,
      important: 18,
      device: 28,
    },
    {
      time: '12-08',
      day: 15,
      important: 24,
      device: 31,
    },
    {
      time: '12-09',
      day: 19,
      important: 28,
      device: 26,
    },
    {
      time: '12-10',
      day: 23,
      important: 25,
      device: 15,
    },
    {
      time: '12-11',
      day: 25,
      important: 18,
      device: 11,
    },
    {
      time: '12-12',
      day: 30,
      important: 12,
      device: 14,
    },
    {
      time: '12-13',
      day: 28,
      important: 10,
      device: 19,
    },
    {
      time: '12-14',
      day: 25,
      important: 13,
      device: 21,
    },
    {
      time: '12-15',
      day: 21,
      important: 17,
      device: 23,
    },
    {
      time: '12-16',
      day: 27,
      important: 8,
      device: 27,
    },
    {
      time: '12-17',
      day: 31,
      important: 15,
      device: 30,
    },
  ]
  taskOptions.value = getLineOptions(data)
}
const getLineOptions = (data) => {
  const xAixsData = []
  const yAixsData1 = []
  const yAixsData2 = []
  const yAixsData3 = []
  data.forEach((item) => {
    xAixsData.push(item.time)
    yAixsData1.push(item.day)
    yAixsData2.push(item.important)
    yAixsData3.push(item.device)
  })
  const option = {
    backgroundColor: 'transparent',
    title: {
      text: '',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },
    legend: {
      data: ['日常安防巡更计划', '重点区域巡检', '设施设备巡检'],
    },
    grid: {
      top: '30',
      left: '30',
      right: '30',
      bottom: '30',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: xAixsData,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: '#757575',
          fontWeight: 400,
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        axisLine: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: '#D5DEED',
          },
        },
        axisLabel: {
          color: '#757575',
          fontWeight: 400,
        },
      },
    ],
    series: [
      {
        name: '日常安防巡更计划',
        type: 'line',
        stack: 'Total',
        emphasis: {
          focus: 'series',
        },
        data: yAixsData1,
        lineStyle: {
          color: '#009ED2',
        },
        areaStyle: {
          color: '#009ED2',
          opacity: 0.3,
        },
        itemStyle: {
          color: '#ffffff',
          borderColor: '#009ED2',
          borderWidth: 2,
        },
      },
      {
        name: '重点区域巡检',
        type: 'line',
        stack: 'Total',
        emphasis: {
          focus: 'series',
        },
        data: yAixsData2,
        lineStyle: {
          color: '#8F6CB9',
        },
        areaStyle: {
          color: '#8F6CB9',
          opacity: 0.3,
        },
        itemStyle: {
          color: '#ffffff',
          borderColor: '#8F6CB9',
          borderWidth: 2,
        },
      },
      {
        name: '设施设备巡检',
        type: 'line',
        stack: 'Total',
        emphasis: {
          focus: 'series',
        },
        data: yAixsData3,
        lineStyle: {
          color: '#1ED162',
        },
        areaStyle: {
          color: '#1ED162',
          opacity: 0.3,
        },
        itemStyle: {
          color: '#ffffff',
          borderColor: '#1ED162',
          borderWidth: 2,
        },
      },
    ],
  }
  return option
}
const handleSearch = () => {
  initTableList(1)
  initOptions()
}
const handleReset = () => {
  searchParams.time = []
  initTableList(1)
  initOptions()
}
const handleExport = () => {}
onMounted(() => {
  initTableList()
  initOptions()
  tableData.value = [
    {
      time: '2024-01-08',
      jhcs: 20,
      ywcs: 12,
      wwcs: 38,
      css: 5,
      jhs: 48,
      zc: 50,
      yc: 15,
    },
    {
      time: '2024-01-08',
      jhcs: 20,
      ywcs: 12,
      wwcs: 38,
      css: 5,
      jhs: 48,
      zc: 50,
      yc: 15,
    },
    {
      time: '2024-01-08',
      jhcs: 20,
      ywcs: 12,
      wwcs: 38,
      css: 5,
      jhs: 48,
      zc: 50,
      yc: 15,
    },
    {
      time: '2024-01-08',
      jhcs: 20,
      ywcs: 12,
      wwcs: 38,
      css: 5,
      jhs: 48,
      zc: 50,
      yc: 15,
    },
    {
      time: '2024-01-08',
      jhcs: 20,
      ywcs: 12,
      wwcs: 38,
      css: 5,
      jhs: 48,
      zc: 50,
      yc: 15,
    },
    {
      time: '2024-01-08',
      jhcs: 20,
      ywcs: 12,
      wwcs: 38,
      css: 5,
      jhs: 48,
      zc: 50,
      yc: 15,
    },
  ]
})
</script>
<style lang="scss" scoped>
.statistics-wrapper {
  width: 100%;
  height: 100%;
  .search {
    width: 100%;
    height: 70px;
    background: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(72, 121, 238, 0.1);
    border-radius: 4px;
    margin-bottom: 20px;
    box-sizing: border-box;
    padding: 20px 30px 0 30px;
    display: flex;
  }
  .content {
    width: 100%;
    height: calc(100% - 90px);
    background: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(72, 121, 238, 0.1);
    border-radius: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    &-top {
      width: 100%;
      height: 300px;
      box-sizing: border-box;
      border-bottom: 1px solid #d5deed;
      &-chart {
        width: 100%;
        height: calc(100% - 36px);
        box-sizing: border-box;
        padding: 15px 0 0 0;
      }
    }
    &-bottom {
      width: 100%;
      height: calc(100% - 300px);
      min-height: 350px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      &-table {
        width: 100%;
        flex: 1;
        box-sizing: border-box;
        padding: 20px 30px 10px 30px;
        position: relative;
        :deep(.custom-table) {
          position: relative;
          .el-table__header {
            tr {
              height: 27px;
              .el-table__cell {
                padding: 1px 0;
                border-bottom: none;
              }
              .el-table_1_column_1 {
                border-bottom: 1px solid #dbe3f0;
              }
              .el-table_1_column_2 {
                border-bottom: 1px solid #dbe3f0;
              }
              &:last-child {
                .el-table__cell {
                  border-bottom: 1px solid #dbe3f0;
                }
              }
            }
          }
        }
      }
      &-page {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        box-sizing: border-box;
        padding: 20px 30px 20px 30px;
      }
    }
  }
  .title {
    width: 100%;
    padding: 20px 30px 0 30px;
    font-size: 16px;
    line-height: 16px;
    font-weight: 500;
    color: #151515;
    position: relative;
    &::before {
      content: ' ';
      position: absolute;
      width: 4px;
      height: 16px;
      background: linear-gradient(0deg, #4575ee 0%, #6297f5 100%);
      border-radius: 2px;
      top: 20px;
      left: 20px;
    }
  }
}
</style>
